<template>
    <div class="guide">
<router-link to="/businessflow">
<div class="left">
<img src="images/guide_03.jpg">
<p class="big">买卖流程</p>
<p class="small">交易不再难</p>
</div>
</router-link>
<div class="right">
    <router-link to="/riskmap">
    <div class="r-t">
        <img src="images/guide_05.jpg">
        <p class="big">风险地图</p>
        <p class="small">风险早知道</p>
    </div>
    </router-link>
    <router-link to="/avoidguide">
<div class="r-b">
<img src="images/guide_08.jpg">
<p class="big">避坑指南</p>
<p class="small">远离购房风险</p>
</div>
    </router-link>
</div>
    </div>
</template>

<script>
export default {
    
}
</script>

<style scoped>
*{margin: 0;padding: 0;}
.guide{
    width: 350px;
    height: 150px;
    margin: 15px; 
    
}
.left,.right{
    width:160px;
    height: 150px;
    float: left;
    
}
.left{
    position: relative;
}
.big{
    font-size: 16px;
    color: black;
}
.small{
    font-size: 12px;
    color: grey;
}
.left .big{
    position: absolute;
    top: 15px;
    left: 15px;
}
.left .small{
    position: absolute;
    top: 40px;
    left: 15px;
}
.left img{
    width: 100%;
    height: 100%;
}
.right{
    margin-left: 15px;
}
.right .r-t{
width: 100%;
height: 70px;
position: relative;

}
.right .r-t .big{
    position: absolute;
    top: 10px;
    left: 15px;
}
.right .r-t .small{
    position: absolute;
    top: 30px;
    left: 15px;
}
.right .r-t img{
    width: 100%;
    height: 100%;
}
.right .r-b{
width: 100%;
height: 70px;
margin-top:10px;
position: relative;
}
.right .r-b .big{
    position: absolute;
    top: 10px;
    left: 15px;
}
.right .r-b .small{
    position: absolute;
    top: 30px;
    left: 15px;
}
.right .r-b img{
    width: 100%;
    height: 100%;
}
</style>